<template>

  <a-modal
    title="修改头像"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="800"
    :footer="null"
    @cancel="handleCancel">
    <a-row>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
        >
        </vue-cropper>
      </a-col>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img"/>
        </div>
      </a-col>
    </a-row>
    <br>
    <a-row>
      <a-col :lg="2" :md="2">
        <a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
          <a-button icon="upload">选择图片</a-button>
        </a-upload>
      </a-col>
      <a-col :lg="{span: 1, offset: 2}" :md="2">
        <a-button icon="plus" @click="changeScale(1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="minus" @click="changeScale(-1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="undo" @click="rotateLeft"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="redo" @click="rotateRight"/>
      </a-col>
      <a-col :lg="{span: 2, offset: 6}" :md="2">
        <a-button type="primary" @click="handleUpload">保存</a-button>
      </a-col>
    </a-row>
  </a-modal>

</template>
<script>
  import { uploadPersonImage } from '@/api/basic/soldier'
  export default {
    data () {
      return {
        visible: false,
        confirmLoading: false,
        options: {
          img: '',
          autoCrop: true,
          autoCropWidth: 130,
          autoCropHeight: 160,
          fixedBox: true
        },
        previews: {},
        person: {}
      }
    },
    methods: {
      edit (record) {
        this.visible = true
        this.person = record
      },
      upload (record) {
        this.visible = true
        this.person = record
      },
      close () {
        this.id = null
        this.visible = false
      },
      handleRemove (file) {
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      },
      handleCancel () {
        this.close()
      },
      changeScale (num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      rotateLeft () {
        this.$refs.cropper.rotateLeft()
      },
      rotateRight () {
        this.$refs.cropper.rotateRight()
      },
      beforeUpload (file) {
        const isAccessory = (['image/png', 'image/jpeg'].includes(file.type))
        if (!isAccessory) {
          this.$message.error('不支持的文件类型!')
        }
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.options.img = reader.result
        }
        return false
      },
      // handleUpload () {
      //   const formData = new FormData()
      //   this.$refs.cropper.getCropBlob((data) => {
      //     const img = window.URL.createObjectURL(data)
      //
      //     formData.append('imgBase64', file)
      //     formData.append('personCard', this.person.personCard)
      //     console.log('img' + file)
      //     uploadImage(formData)
      //       .then(res => {
      //         if (res.message !== 'error') {
      //           this.visible = false
      //           this.confirmLoading = false
      //           this.fileList = []
      //           this.$message.info(res.objResult)
      //           this.$emit('ok')
      //         } else {
      //           this.confirmLoading = false
      //           this.$message.error('操作失败！')
      //         }
      //       })
      //   })
      // },
      handleUpload () {
        const formData = new FormData()
        const that = this
        this.$refs.cropper.getCropData((data) => {
          const isLt2M = data.length / 1024 / 1024 < 2
          if (!isLt2M) {
            this.$message.error('文件大小不能超过2M，请确认数据后上传!')
            return
          }
          formData.append('file', data)
          formData.append('id', this.person.personId)
          formData.append('card', this.person.personIdcard)
          uploadPersonImage(formData).then(res => {
            console.log(res)
            if (res.message === 'error') {
              this.$message.error(res.result)
            } else {
              that.close()
              that.$emit('ok', res.result)
            }
          }).catch(err => {
            console.log(err)
          })
        })
      },
      realTime (data) {
        this.previews = data
      }
    }
  }
</script>

<style lang="less" scoped>

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translate(50%, -50%);
    width: 130px;
    height: 160px;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
